import React, { Component } from 'react';
import { connect } from 'dva';
import SearchContrastFrom from './SearchContrastFrom';
import { SingleBar } from '@/components/Chart/BarCategory';
import { examineReportCompare } from '../service';
import { message } from 'antd';
import { checkInit } from '@/utils/util';
import { DICT } from '../enum';


interface Props {
  dict?: any,
  dispatch?: Function
}
@connect(({ analyse_check }) => ({
  dict: analyse_check.dict
}))
export default class AnalyseCheck extends Component<Props, any> {

  state = {
    checkBar: null,
    seriesGoodData: [],
    seriesBadData: [],
    monthList: []
  };

  componentDidMount() {
    checkInit();
    const { dispatch } = this.props;
    dispatch({
      type: 'analyse_check/queryDict',
      payload: { keyList: DICT }
    }).then(() => {
      const { dict = {} } = this.props;
      const monthList = dict['report.compare.month'];
      const month = (new Date().getMonth() + 1).toString();
      const year = new Date().getFullYear();
      const config = {
        compareMonth: month,
        compareYear: year,
        month: month,
        year: year
      };
      examineReportCompare(config).then(data => {
        if (data) {
          this.setState({
            seriesGoodData: data.result,
            seriesBadData: data.compareResult
          }, () => {
            SingleBar({
              ref: this.state.checkBar,
              color: ['#49a1ff', '#ffb531'],
              title: `${config.year}年${monthList[config.month]}、${config.compareYear}年${monthList[config.compareMonth]}检查报告分析`,
              legendData: [`${config.year}年(左)  ${monthList[config.month]}`, `${config.compareYear}年(右)  ${monthList[config.compareMonth]}`],
              seriesGoodData: this.state.seriesGoodData,
              seriesBadData: this.state.seriesBadData
            })
          });
        }
      });
    });
  }

  initCurrent = (config) => {
    examineReportCompare(config).then(data => {
      if (data) {
        this.setState({
          seriesGoodData: data.result,
          seriesBadData: data.compareResult
        }, () => {
          SingleBar({
            ref: this.state.checkBar,
            color: ['#49a1ff', '#ffb531'],
            title: `${config.year}年${this.state.monthList[config.month]}、${config.compareYear}年${this.state.monthList[config.compareMonth]}检查报告分析`,
            legendData: [`${config.year}年(左)  ${this.state.monthList[config.month]}`, `${config.compareYear}年(右)  ${this.state.monthList[config.compareMonth]}`],
            seriesGoodData: this.state.seriesGoodData,
            seriesBadData: this.state.seriesBadData
          })
        });
      }
    });
  };

  getMonthList = (monthList) => {
    this.setState({ monthList })
  };

  render() {
    return (
      <>
        <SearchContrastFrom initCurrent={this.initCurrent} getMonthList={this.getMonthList} />
        <div ref={(value) => { this.state.checkBar = value }} style={{ 'height': '75%' }}></div>
      </>
    )
  }
}
